<template>
    <el-tabs model-value="cms">
        <el-tab-pane label="内容设置" name="cms">
            <div class="cms_box">
                <mi-panel
                          class="mb10"
                          v-for="(vo,i) in component.info.list" :key="i"
                          @close="removeLi(i)"
                >
                    <div class="d_flex">
                        <mi-up-image v-model="vo.image" size="76px" class="mr10" />
                        <div>
                            <div class="d_flex flex_ai_c">
                                <label>链接</label>
                                <url-select v-model="vo.url" />
                            </div>
                        </div>
                    </div>
                </mi-panel>
                <div class="d_flex flex_jc_c">
                    <el-button type="primary" @click="addLi">添加元素</el-button>
                </div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="style">
            <el-form label-width="90px" class="style_box">
                <el-form-item label="每行数量">
                    <mi-radio v-model="component.info.class.col_num"
                              :options="colOptions" />
                </el-form-item>
                <el-form-item label="组件边角">
                    <mi-radio v-model="component.info.class.radius"
                              :options="[{id:'right', title:'直角'}, {id:'fillet', title:'圆角'}]" />
                    <mi-form-aux>设置组件边角弧度，请自行处理图片弧度</mi-form-aux>
                </el-form-item>
                <el-form-item label="图片间隔">
                    <mi-radio v-model="component.info.class.image_space"
                              :options="[{id:'image_space', title:'有间隔'}, {id:'no_image_space', title:'无间隔'}]" />
                </el-form-item>
                <el-form-item label="下边距">
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <el-slider v-model="component.info.style.margin_bottom" />
                        </el-col>
                        <el-col :span="8">
                            <mi-input-number v-model="component.info.style.margin_bottom" controls-position="right" controls size="small" />
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="左右边距">
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <el-slider v-model="component.info.style.margin_x" />
                        </el-col>
                        <el-col :span="8">
                            <mi-input-number v-model="component.info.style.margin_x" controls-position="right" controls size="small" />
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup lang="ts">

import {inject} from "vue";
import {gridLi} from "@/views/site/diy/diy";
import UrlSelect from "@/views/site/diy/components/UrlSelect/index.vue";

const colOptions = [
    {id:'col_1', title:'1个'},{id:'col_2', title:'2个'},{id:'col_3', title:'3个'}, {id:'col_4', title:'4个'}, {id:'col_5', title:'5个'},
    {id:'showcase', title:'橱窗'}
]

const component : any = inject("selectedComponent")
const addLi = () => {
    component.info.list.push({...gridLi})
}
const removeLi = (index:number) => {
    component.info.list.splice(index,1)
}
</script>

<style scoped lang="scss">
.cms_box{
    padding: 10px;
    label{
        width: 32px;
    }
}
.style_box{
    padding: 10px;
    .el-input-number{
        width: 100% !important;
    }
    .el-row{
        width: 100%;
    }
}
</style>
